﻿@(Layout = null)
<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Index</title>
    
    <partial name="_ElementUiStylesPartial" />
    <partial name="_AvueStylesPartial" />
    <partial name="_AnimateCssStylesPartial" />
    <partial name="_SiteStylesPartial" />
    
    <style>
        .avue-tree .el-input-group__append {
            display: none;
        }
    </style>
</head>
<body>
    <div id="vue-app">
        <el-container>
            <el-main>
                <el-row>
                    <el-col :span="8">
                        <avue-tree ref="menu"
                                   :option="menu.option"
                                   :data="menu.data"
                                   @@node-click="onMenuNodeClick"
                                   @@update="onUpdateMenu"
                                   @@save="onAddMenu"
                                   @@del="onDelMenu"
                                   v-model="menu.form">
                            <template slot-scope="scope" slot="menuBtn">
                                <el-dropdown-item @@click.native="onMenuAddClick(scope.node,scope.data)">新增</el-dropdown-item>
                                <el-dropdown-item @@click.native="onMenuEditClick(scope.node,scope.data)">修改</el-dropdown-item>
                                <el-dropdown-item @@click.native="onMenuDelClick(scope.node,scope.data)">删除</el-dropdown-item>
                            </template>
                        </avue-tree>
                    </el-col>
                    <el-col :span="16">
                        <el-row v-if="menuItems.selectedMenu">
                            <el-col :span="24">
                                <el-card class="box-card" shadow="never">
                                    <div slot="header" class="clearfix">
                                        <el-breadcrumb separator-class="el-icon-arrow-right">
                                            <el-breadcrumb-item v-for="menu in getMenuPath(menuItems.selectedMenu)"
                                                                :key="menu.id">
                                                {{menu.title}}
                                            </el-breadcrumb-item>
                                        </el-breadcrumb>
                                    </div>
                                    <el-container>
                                        <el-main>
                                            <el-row>
                                                <el-col :span="8">
                                                    <span>标题：</span>
                                                    <el-tag type="info">
                                                        {{menuItems.selectedMenu.title}}
                                                    </el-tag>
                                                </el-col>
                                                <el-col :span="8">
                                                    <template v-if="menuItems.selectedMenu.icon && menuItems.selectedMenu.icon.type && menuItems.selectedMenu.icon.type.length > 0">
                                                        <span>图标：</span>
                                                        <el-tag type="info">
                                                            <i v-if="menuItems.selectedMenu.icon.type == 'css'" :class="menuItems.selectedMenu.icon.value"></i>
                                                            <img v-if="menuItems.selectedMenu.icon.type == 'img'" :src="menuItems.selectedMenu.icon.value" style="width: 24px" />
                                                        </el-tag>
                                                    </template>
                                                    <p v-else> </p>
                                                </el-col>
                                                <el-col :span="8">
                                                    <span>排序：</span>
                                                    <el-tag type="info">
                                                        {{menuItems.selectedMenu.order}}
                                                    </el-tag>
                                                </el-col>
                                                <el-col v-if="menuItems.selectedMenu.remark && menuItems.selectedMenu.remark.length > 0" :span="24">
                                                    <span>备注：</span>
                                                    <el-tag type="info">
                                                        {{menuItems.selectedMenu.remark}}
                                                    </el-tag>
                                                </el-col>
                                            </el-row>
                                        </el-main>
                                    </el-container>
                                </el-card>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="24">
                                <avue-crud ref="menuItem"
                                           :data="menuItems.pagedData"
                                           :option="menuItems.option"
                                           v-model="menuItems.form"
                                           @@row-save="onAddMenuItem"
                                           @@row-update="onUpdateMenuItem"
                                           @@row-del="onDelMenuItem"
                                           :page="menuItems.page"
                                           @@size-change="onMenuItemPageSizeChange"
                                           @@current-change="onMenuItemPageCurrentChange">
                                    <template slot="menuLeft">
                                        <el-button type="primary"
                                                   size="small"
                                                   @@click="onMenuItemAddClick"
                                                   :disabled="!menuItems.selectedMenu">
                                            <i class="el-icon-plus"></i><span>新 增</span>
                                        </el-button>
                                    </template>
                                    <template slot-scope="scope" slot="menu">
                                        <el-button type="primary"
                                                   size="small"
                                                   @@click="onMenuItemEditClick(scope.row, scope.index)">
                                            <i class="el-icon-edit"></i><span>编 辑</span>
                                        </el-button>
                                        <el-button type="danger"
                                                   size="small"
                                                   @@click="onMenuItemDelClick(scope.row, scope.index)">
                                            <i class="el-icon-delete"></i><span>删 除</span>
                                        </el-button>
                                    </template>
                                    <template slot-scope="scope" slot="linkForm">
                                        <el-select v-loading="links.length === 0"
                                                   v-model="menuItems.form.link"
                                                   :disabled="menuItems.uneditable"
                                                   placeholder="请选择"
                                                   filterable>
                                            <el-option-group v-for="group in links"
                                                             :key="group.key"
                                                             :label="group.key">
                                                <el-option v-for="(item, index) in group.links"
                                                           :key="index"
                                                           :label="item"
                                                           :value="item">
                                                </el-option>
                                            </el-option-group>
                                        </el-select>
                                    </template>
                                    <template slot-scope="scope" slot="icon">
                                        <i v-if="scope.label && scope.label.type == 'css'" :class="scope.label.value"></i>
                                        <img v-if="scope.label && scope.label.type == 'img'" :src="scope.label.value" style="width: 24px" />
                                    </template>
                                    <template slot-scope="scope" slot="iconForm">
                                        <el-input v-model="menuItems.form.icon.value"
                                                  :disabled="menuItems.uneditable"></el-input>
                                    </template>
                                </avue-crud>
                            </el-col>
                        </el-row>

                    </el-col>
                </el-row>
            </el-main>
        </el-container>
    </div>

    <partial name="_LinqJsScriptsPartial" />
    <partial name="_JQueryScriptsPartial" />
    <partial name="_AxiosScriptsPartial" />
    <partial name="_QsScriptsPartial" />
    <partial name="_VueScriptsPartial" />
    <partial name="_ElementUiScriptsPartial" />
    <partial name="_AvueScriptsPartial" />
    <partial name="_VueSubmitFormHelperScriptsPartial" />

    <script>
        var vueApp = new Vue({
            el: '#vue-app',
            created: function () {
                var _this = this;

                axios.get('/Manage/Menu/GetMenu')
                    .then(function (response) {
                        _this.menu.data.length = 0;
                        _this.menu.data.push(response.data);
                    }).catch(function (error) {
                        console.error(error);
                    });

                axios.get('/Manage/Menu/GetLinks')
                    .then(function (response) {
                        _this.links = response.data;
                    }).catch(function (error) {
                        console.error(error);
                    });
            },
            mounted: function () {
                this.$refs.menu.formOption.column.asEnumerable().single(m => m.prop === 'parentId').dicData = this.menu.data;
            },
            data: function () {
                return {
                    menu: {
                        uneditable: false,
                        form: {},
                        option: {
                            addBtn: false,
                            editBtn: false,
                            delBtn: false,
                            nodeKey: 'id',
                            formOption: {
                                labelWidth: 100,
                                column: [
                                    {
                                        label: 'Id',
                                        prop: 'id',
                                        visdiplay: false
                                    },
                                    {
                                        label: '排序',
                                        prop: 'order',
                                        type: 'number'
                                    }, {
                                        label: '父菜单',
                                        prop: 'parentId',
                                        type: 'tree',
                                        dicData: [],
                                        visdiplay: false,
                                        props: {
                                            label: 'title',
                                            value: 'id'
                                        },
                                        rules: [{
                                            required: true,
                                            message: "请选择父菜单",
                                            trigger: "change"
                                        }],
                                        span: 24
                                    }, {
                                        label: '备注',
                                        prop: 'remark',
                                        type: 'textarea',
                                        span: 24
                                    }
                                ]
                            },
                            props: {
                                labelText: '标题',
                                label: 'title',
                                value: 'title',
                                children: 'children'
                            }
                        },
                        data: []
                    },
                    menuItems: {
                        uneditable: false,
                        selectedMenu: null,
                        form: {},
                        option: {
                            title: '菜单项',
                            page: false,
                            align: 'center',
                            menuAlign: 'center',
                            addBtn: false,
                            editBtn: false,
                            delBtn: false,
                            column: [
                                {
                                    label: '菜单Id',
                                    prop: 'menuId',
                                    hide: true,
                                    visdiplay: false
                                },
                                {
                                    label: '标题',
                                    prop: 'title',
                                    rules: [
                                        {
                                            required: true,
                                            message: "请输入标题",
                                            trigger: "blur"
                                        }
                                    ]
                                },
                                {
                                    label: '链接',
                                    prop: 'link',
                                    formsolt: true,
                                    rules: [
                                        {
                                            required: true,
                                            message: "请选择链接",
                                            trigger: "blur"
                                        }
                                    ]
                                },
                                {
                                    label: '图标',
                                    prop: 'icon',
                                    solt: true,
                                    formsolt: true
                                },
                                {
                                    label: '排序',
                                    prop: 'order',
                                    type: 'number'
                                },
                                {
                                    label: '备注',
                                    prop: 'remark',
                                    type: 'textarea',
                                    span: 24
                                }
                            ]
                        },
                        page: {
                            //pageSizes: [10, 20, 30, 40],
                            currentPage: 1,
                            total: 0,
                            pageSize: 10
                        },
                        data: [],
                        pagedData: []
                    },
                    links: []
                };
            },
            watch: {
                'menuItems.data': {
                    handler(newValue, oldValue) {
                        this.menuItems.page.total = this.menuItems.data.length;
                        this.onMenuItemPageCurrentChange(1);
                    },
                    deep: true,
                    immediate: true
                }
            },
            methods: {
                onMenuNodeClick: function (data) {
                    this.menuItems.selectedMenu = data;
                    this.menuItems.data = data.items;
                },
                onMenuAddClick: function (node, data) {
                    this.$refs.menu.append(node, data);
                    setTimeout(() => this.menu.form.parentId = data.id, 0);

                },
                onAddMenu: function (data, node, done) {
                    var _this = this;

                    var submitFormHelper = this.$submitFormHelper;
                    this.menu.form.items = [];
                    this.menu.form.children = [];
                    submitFormHelper.submitForm('/Manage/Menu/CreateMenu', 'post', this.menu.form)
                        .then(function (response) {
                            response.data.is_show = false;
                            response.data.path = data.path + '/' + response.data.id;
                            data.children.push(response.data);
                            _this.menu.data = node.store.root.data;
                            _this.$refs.menu.hide();
                            _this.$notify({
                                title: '成功',
                                message: '增加成功',
                                type: 'success'
                            });
                        })
                        .catch(function (error) {
                            _this.$refs.menu.hide();
                            _this.$notify.error({
                                title: '失败',
                                message: '增加失败'
                            });
                        });
                },
                onMenuEditClick: function (node, data) {
                    this.$refs.menu.edit(node, data);
                },
                onUpdateMenu: function (data, node, done) {
                    var _this = this;
                    var submitFormHelper = this.$submitFormHelper;
                    this.menu.form.items = [];
                    this.menu.form.children = [];
                    submitFormHelper.submitForm('/Manage/Menu/UpdateMenu', 'post', this.menu.form)
                        .then(function (response) {
                            response.data.is_show = false;
                            response.data.path = data.path;
                            response.data.items = data.items;
                            node.data = response.data;

                            _this.menuItems.selectedMenu = node.data;
                            _this.$refs.menu.hide();
                            _this.$notify({
                                title: '成功',
                                message: '修改成功',
                                type: 'success'
                            });
                        })
                        .catch(function (error) {
                            _this.$refs.menu.hide();
                            _this.$notify.error({
                                title: '失败',
                                message: '修改失败'
                            });
                        });
                },
                onMenuDelClick: function (node, data) {
                    this.$refs.menu.remove(node, data);
                },
                onDelMenu: function (data, node, done) {
                    var _this = this;
                    var submitFormHelper = this.$submitFormHelper;
                    submitFormHelper.submitForm('/Manage/Menu/DeleteMenu', 'post', { id: this.menu.form.id })
                        .then(function (response) {
                            if (response.data === true) {
                                for (var i = 0; i < data.children.length; i++) {
                                    if (data.children[i].id === this.menu.form.id) {
                                        data.children.splice(i, 1);
                                        _this.menu.data = node.store.root.data;
                                        break;
                                    }
                                }
                                _this.$notify({
                                    title: '成功',
                                    message: '删除成功',
                                    type: 'success'
                                });
                            } else {
                                _this.$notify.error({
                                    title: '失败',
                                    message: '删除失败'
                                });
                            }
                        })
                        .catch(function (error) {
                            _this.$notify.error({
                                title: '失败',
                                message: '删除失败'
                            });
                        });
                },
                onMenuItemAddClick: function () {
                    this.menuItems.uneditable = false;

                    this.$refs.menuItem.rowAdd();
                    this.menuItems.form.menuId = this.menuItems.selectedMenu.id;
                    this.menuItems.form.icon = {
                        type: 'css',
                        value: ''
                    };
                },
                onAddMenuItem: function (form, done) {
                    this.menuItems.uneditable = true;

                    var _this = this;
                    var data = this.menuItems.data;
                    var submitFormHelper = this.$submitFormHelper;
                    submitFormHelper.submitForm('/Manage/Menu/CreateMenuItem', 'post', form)
                        .then(function (response) {
                            data.push(response.data);
                            done();
                            _this.$notify({
                                title: '成功',
                                message: '增加成功',
                                type: 'success'
                            });
                        })
                        .catch(function (error) {
                            done();
                            _this.$notify.error({
                                title: '失败',
                                message: '增加失败'
                            });
                        });
                },
                onMenuItemEditClick: function (row, index) {
                    this.menuItems.uneditable = false;

                    this.$refs.menuItem.rowEdit(row, index);
                },
                onUpdateMenuItem: function (form, index, done) {
                    this.menuItems.uneditable = true;

                    var _this = this;
                    var data = this.menuItems.data;
                    var submitFormHelper = this.$submitFormHelper;
                    submitFormHelper.submitForm('/Manage/Menu/UpdateMenuItem', 'post', form)
                        .then(function (response) {
                            Vue.set(data, index, response.data);
                            done();
                            _this.$notify({
                                title: '成功',
                                message: '编辑成功',
                                type: 'success'
                            });
                        })
                        .catch(function (error) {
                            done();
                            _this.$notify.error({
                                title: '失败',
                                message: '编辑失败'
                            });
                        });
                },
                onMenuItemDelClick: function (handleDel) {
                    this.$refs.menuItem.rowDel(handleDel);
                },
                onDelMenuItem: function (row, index) {
                    var _this = this;
                    var data = this.menuItems.data;
                    var submitFormHelper = this.$submitFormHelper;
                    this.$confirm('确定要删除这条记录吗?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        submitFormHelper.submitForm('/Manage/Menu/DeleteMenuItem', 'post', { id: row.id })
                            .then(function (response) {
                                if (response.data === true) {
                                    data.splice(index, 1);
                                    _this.$notify({
                                        title: '成功',
                                        message: '删除成功',
                                        type: 'success'
                                    });
                                } else {
                                    _this.$notify.error({
                                        title: '失败',
                                        message: '删除失败'
                                    });
                                }
                            })
                            .catch(function (error) {
                                _this.$notify.error({
                                    title: '失败',
                                    message: '删除失败'
                                });
                            });
                    }).catch(() => {
                        _this.$notify.info({
                            title: '取消',
                            message: '已取消删除'
                        });
                    });
                },
                onMenuItemPageSizeChange: function (val) {
                    this.menuItems.page.currentPage = 1;
                    this.menuItems.page.pageSize = val;
                    this.menuItems.page.total = this.menuItems.data.length;

                    this.getPagedMenuItem();
                },
                onMenuItemPageCurrentChange: function (val) {
                    this.menuItems.page.currentPage = val;

                    this.getPagedMenuItem();
                },
                getPagedMenuItem: function () {
                    var page = this.menuItems.page;
                    this.menuItems.pagedData =
                        this.menuItems.data
                            .asEnumerable()
                            .skip(page.pageSize * (page.currentPage - 1))
                            .take(page.pageSize)
                            .toArray();
                },
                getMenuPath: function (menu) {
                    var menus = [];

                    if (menu) {
                        var pArr = menu.path.split('/');
                        var nowMenus = this.menu.data;

                        for (var i = 0; i < pArr.length; i++) {
                            var tmp = nowMenus.asEnumerable()
                                .single(m => m.id === pArr[i]);
                            menus.push(tmp);

                            nowMenus = tmp.children;
                        }
                    }

                    return menus;
                }
            }
        });
    </script>
</body>
</html>
